<template>
  <Page class="demo-CA demo-page">
    <button class="theme-btn" @click="goToSign('applicant')">
      签名
    </button>
    <div v-if="applicantImgSrc" class="sign-result">
      <h4 class="title">签名图片</h4>
      <img class="sign-img" :src="applicantImgSrc" />
    </div>
  </Page>
</template>

<script>
export default {
  name: "demoCA",
  data() {
    return {
      // 签名对象
      applicantSigner: {
        context_id: 20, // id
        custName: "cxgc", // 签名人姓名
        identificationNumber: "11111*****XXXX", // 签名人身份证
        keyword: "签名", // 签名关键字，按照这个去对pdf
        hint: "请在下方进行签字确认" // 提示信息(支持html)
      },
      applicantImgSrc: null, // 签名图片
      // 被保人签名对象
      insuredSigner: {
        context_id: 21, // id
        custName: "李四", // 签名人姓名
        identificationNumber: "110101198207160022", // 签名人身份证
        keyword: "被保人签名", // 签名关键字，按照这个去对pdf
        hint: "请被保人 <strong>李四</strong> 签字" // 提示信息(支持html)
      },
      insuredImgSrc: null // 被保人签名图片
    };
  },
  computed: {},
  created() {
    // 监听签名事件
    this.$eventBus.$on(
      "signed",
      data => {
        if (data.context_id === 20) {
          // 
          this.applicantImgSrc = data.imgSrc;
        } else if (data.context_id === 21) {
          // 被保人
          this.insuredImgSrc = data.imgSrc;
        }
      },
      this
    );
  },
  methods: {
    // 跳转到签名页面
    goToSign(type) {
      // 设置state以便ca页面取到
      this.$store.commit("global/setState", {
        attr: "signer",
        data: this[`${type}Signer`]
      });
      // 跳转到ca页面
      this.go("ca");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";
.theme-btn {
  margin-top: 0;
}

.sign-result {
  .title {
    text-align: center;
  }
  .sign-img {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: auto;
  }
}
</style>
